<template>
  <div class="container">
    <div class="total" v-if="innerList.length">
      <span class="name">全部费用</span>
      <span class="num">{{ Number(cdata.totalMoney).toFixed(2) }}</span>
      <span class="unit">万元</span>
    </div>
    <div id="adminHome_exspence"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "AdminExspence",

  props: {
    cdata: Object,
  },

  data() {
    return {
      innerList: [],
      outerList: [],
    };
  },

  watch: {
    cdata(v) {
      this.chartDataInit(v);
    },
  },

  mounted() {
    this.chartDataInit(this.cdata);
  },

  methods: {
    // chartDataInit(data) {
    //   this.innerList = this.chartDataFormat(data.exspence, data.totalMoney);
    // },
    chartDataFormat(data, total) {
      let n = 0;
      return data.map((e, i) => {
        let per;
        if (i >= data.length - 1) {
          per = 100 - n;
          per = Math.round(per * 100) / 100;
        } else per = Number(((e.value / total) * 100).toFixed(2));
        n += per;
        return {
          ...e,
          per,
        };
      });
    },
    chartDataInit(data) {
      data.totalMoney = 1000;
      data.exspence = [
        { name: "新华三云", value: 113.03 },
        { name: "浪潮云", value: 765.82 },
        { name: "曙光云", value: 234.76 },
      ];
      this.innerList = this.chartDataFormat(data.exspence, data.totalMoney);
      this.chartInit();
    },
    chartInit() {
      console.log(this.innerList);
      console.log(this.outerList);
      const c = echarts.init(document.getElementById("adminHome_exspence"));
      c.setOption({
        color: [
          "#2e76ff",
          "#45c6fc",
          "#ff6161",
          "#2e76ff",
          "#45c6fc",
          "#ff6161",
          "#f5d900",
          "#00eb8c",
          "#ccc",
        ],
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          formatter(e) {
            const { name, value, realVal, realPer } = e.data;
            return [
              `<div>${e.marker}${name}</div>`,
              `<div>费用：${realVal || value} 万元</div>`,
              `<div>占比：${realPer || e.percent} %</div>`,
            ].join("");
          },
        },
        series: [
          {
            name: "费用",
            type: "pie",
            radius: [0, "45%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 1548, name: "新华三云" },
              { value: 775, name: "浪潮云" },
              { value: 679, name: "曙光云" },
            ],
          },
          {
            name: "Access From",
            type: "pie",
            radius: ["55%", "75%"],
            // center: ["45%", "50%"],
            // labelLine: {
            //   length: 30,
            // },
            hoverAnimation: false,
            label: {
              formatter(e) {
                const { name, realVal, realPer } = e.data;
                return `{b|${name}}\n{c|${realVal}万元 ${realPer}%}`;
              },
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 18,
                  align: "center",
                },
                c: {
                  color: "#4C5058",
                  align: "center",
                },
              },
            },
            data: [
              { value: 14, name: "市大数据中心", realVal: 234, realPer: 1.6 },
              { value: 10, name: "市网络理政办", realVal: 147, realPer: 1.2 },
              { value: 10, name: "市场监管局", realVal: 135, realPer: 1.2 },
              { value: 8, name: "市住建局", realVal: 102, realPer: 1.0 },
              { value: 8, name: "市检察院", realVal: 102, realPer: 1.0 },
              { value: 60, name: "其他", realVal: 3102, realPer: 94 },
            ],
          },
        ],
      });
    },
    seriesInit(list) {
      return list.map((e) => ({
        name: e.name,
        type: "bar",
        stack: "total",
        label: {
          show: true,
          fontSize: 16,
          lineHeight: 22,
          position: "top",
          formatter() {
            return [
              `${e.name}`,
              `${e.value}`,
              `${e.per}%`, //
            ].join("\n");
          },
        },
        emphasis: {
          focus: "series",
        },
        data: [e.value],
      }));
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 206px;
  // padding: 0 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total {
  width: 180px;
  height: 160px;
  // margin-left: 20px;
  padding: 0 10px;
  border-radius: 3px;
  background-color: #fff4e1;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #8e94a3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .name {
    display: inline-block;
    width: 100%;
    margin: 10px;
    text-align: start;
  }

  .num {
    font-size: 32px;
    color: #ffa915;
  }

  .unit {
    display: inline-block;
    width: 100%;
    margin: 10px;
    text-align: end;
  }
}

#adminHome_exspence {
  // width: 600px;
  width: 440px;
  height: 206px;
  border-radius: 4px;
}
</style>
